<template>
  <div :id="replaceDivId()" ></div>
</template>
<script>
import {uuid} from './../../../src/api/utils/Util.js';
import {macarons} from './../../../src/api/utils/macarons';
import {option} from './../../../src/api/utils/HomeChart';
export default {
  name: 'LineVue',
  props: {
    DivId: {
      type: String
    },
    data: {
      type: Array
    },
    xData: {
      type: Array
    },
    title: {
      type: String
    },
    color: {
      type: String
    },
    isAreaOrNum: {
      type: Boolean
    }
  },
  data () {
    return {
      days: []
    }
  },
  created () {
    this.$echarts.registerTheme('macarons', macarons)
    let that = this
    this.$nextTick(function () {
      that.resetRenderer()
    })
  },
  methods: {
    parseDate (dateStr) {
      let temp = new Date(dateStr)
      let result = temp.getFullYear() + '/' + (temp.getMonth() + 1) + '/' + temp.getDate()
      return result
    },
    getDay (day) {
      let today = new Date()
      let targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetday) // 注意，这行是关键代码
      let tYear = today.getFullYear()
      let tMonth = today.getMonth()
      let tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth (month) {
      var m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    },
    replaceDivId () {
      return this.DivId ? this.DivId.replace(/\s+/g, '') + '_div' : uuid + '_div'
    },
    resetRenderer () {
      let that = this
      this.$nextTick(function () {
        that.draw()
      })
    },
    draw () {
      let div = document.querySelector('#' + this.replaceDivId())
      if (div) {
        let myChart = this.$echarts.init(div, 'macarons')
        myChart.setOption(this.resetOption(), true)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    },
    resetOption () {
      let newoption = option
      newoption.series = []
      if (this.xData.length === 0) {
        for (let i = 0; i < 7; i++) {
          newoption.xAxis[0].data.push(this.getDay(i - 6))
        }
      } else {
        newoption.xAxis[0].data = this.xData
      }
      if (this.data) {
        // console.log("----1212"+ this.data)
        newoption.title.text = this.title
        newoption.yAxis[0].name = this.isAreaOrNum ? '数量' : '面积'
        newoption.yAxis[0].axisLabel.formatter = this.isAreaOrNum ? '{value}件' : '{value}m²'
        let obj = {
          type: 'line',
          data: this.data,
          itemStyle: {
            normal: {
              lineStyle: {
                color: this.color,
                borderColor: this.color,
                width: 4,
                shadowColor: 'rgba(0, 0, 0, 0.3)', // 设置折线阴影
                shadowBlur: 15,
                shadowOffsetY: 20
              }
            }
          }
        }
        newoption.series.push(obj)
      }
      return newoption
    }
  }
}

</script>

<style scoped>
#home_left_div {
  float: left;
  width: 49%;
  height: 20rem;
}

#home_right_div {
  float: right;
  width: 49%;
  height: 20rem;
}
</style>
